<template>
  <table border="1">
    <tr>
      <th v-for="item in columns">{{ item }}</th>
    </tr>
    <tr v-for="item in tableData">
      <td v-for="prop in props">{{ item[prop] }}</td>
    </tr>
    <slot></slot>
  </table>
</template>

<script setup>
import { ref, provide } from "vue";

defineProps(["tableData"]);
// provide 用于向下级组件提供数据，子组件通过 inject 来接收数据
provide("updateProp", updateProp);
provide("updateColumns", updateColumns);

const columns = ref([]);
const props = ref([]);

function updateProp(val) {
  console.log(val);
  props.value.push(val);
}

function updateColumns(val) {
  console.log(val);
  columns.value.push(val);
}
</script>
